/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
importPackage(java.io);

var x = null;
var canvas = null;//esta variable representara el canvas
var context = null;// mientras que esta representara el contexto donde dibujaremos todo.

function iniciar(){
var x = 150;
var y = 200;
var tamano = 30;
//x = coordenada_x(149);

    //si la funcion getContext existe, es porque soporta canvas
	canvas = document.getElementById("canvas");
	if (canvas.getContext){
		context = canvas.getContext('2d');
               //alert("tu navegador SIIII soporta canvas");
	} else {
		alert("tu navegador no soporta canvas");
	}
        if (canvas !== null){
	context.fillStyle = "#F2F2F2";//pintamos
	context.fillRect(0, 0, canvas.width, canvas.height); //cuadrado
        context.fillStyle = "#000000"; //pintamos 
        context.fillRect(x, y, tamano, tamano); //dibujamos

//para saber que tecla ha sido presionada
var arriba = false;
var abajo = false;
var izquierda = false;
var derecha = false;
//creamos una función que manejaremos que vamos hacer cuando, pulsen una tecla
function pulsar(e){
	switch(e.keyCode){
		//izquierda
		case 37:
			izquierda = true;
			break;
		//arriba
		case 38:
			arriba = true;
			break;
		//derecha
		case 39:
			derecha = true;
			break;
		//abajo
		case 40:
			abajo = true;
			break;
	}
}
//cuando presionen la tecla (osea cuando el evento keydown se active) quiero que ejecute mi función pulsar
//false tiene que ver con capturas por el momento no se moleste, y si lo saben pues tampoco se molesten
window.addEventListener('keydown', pulsar, false);

//creamos una función que manejaremos que vamos hacer cuando, suelten una tecla
function soltar(e){
	switch(e.keyCode){
		//izquierda
		case 37:
			izquierda = false;
			break;
		//arriba
		case 38:
			arriba = false;
			break;
		//derecha
		case 39:
			derecha = false;
			break;
		//abajo
		case 40:
			abajo = false;
			break;
	}
}
//cuando suelten una tecla (osea cuando el evento keyup se active) quiero que ejecute mi función soltar
window.addEventListener('keyup', soltar, false);

function ciclo(){
	//aqui elegimos el color con que vamos a pintar nuestro canvas
	context.fillStyle = "#F2F2F2";
	//con esta funcion creamos un cuadrado que cubrira todo el canvas
	// fillRect(x, y, ancho, alto)
	context.fillRect(0, 0, canvas.width, canvas.height);
	
	//elegimos el color negro ya que sera el color de nuestro héroe
	context.fillStyle = "#000000";
	//aqui vamos a dibujar el cuadrado, digo nuestro héroe
	//x, y son las posiciones en el plano de nuestro héroe
	//tamano representara el ancho y la altura, ya que serian las mismas.
	context.fillRect(x, y, tamano, tamano);
	
	mover();//con esta función actualizamos las posiciones según la tecla que haya sido presionada
}
function mover(){
	//si vamos a la izquierda y podemos restar 15 sin que de negativo
	if (izquierda && x >= 15){
		x-=15;
	}
	//si vamos a la derecha y podemos sumarle 15 sin pasarno del ancho de la pagina
	if (derecha && x+tamano <= (canvas.width - 15) ){
		x+=15;
	}
	if (arriba && y>= 15){
		y-=15;
	}
	if (abajo && y+tamano <= (canvas.height - 15) ){
		y+=15;
	}
}
setInterval(ciclo, 100);
}

}
